<!--
 * @Author: yangjiaolong
 * @Date: 2020-09-27 14:00:11
 * @LastEditTime: 2020-10-20 16:36:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \electron-start\src\renderer\components\form\Input.vue
-->
<!--
    时间有限，更多的功能做的时候再加，如果你觉得没必要用这个组件就直接用el-input去修改样式达成目的
-->
<template>
  <el-input
    ref="elInput"
    class="house-keeper-input"
    size="small"
    :value="value"
    :maxlength="maxlength"
    :minlength="minlength"
    :show-word-limit="showWordLimit"
    :placeholder="placeholder"
    :clearable="clearable"
    :disabled="disabled"
    :autofocus="autofocus"
    :show-password="showPassword"
    :type="type"
    @input="$emit('input', $event)"
    @blur="onBlur"
    @focus="onFocus"
    @clear="clear"
  >
    <slot v-if="$slots.prepend" slot="prepend" name="prepend" />
    <slot v-if="$slots.append" slot="append" name="append" />

    <!-- 有前缀 -->
    <slot v-if="$slots.prefix" slot="prefix" name="prefix" />
    <!-- 没前缀 -->
    <slot v-if="!$slots.prefix" slot="prefix" name="prefix">
      <!-- 有icon -->
      <svg v-if="prefixIcon" :class="['icon']" aria-hidden="true">
        <use :xlink:href="`#${prefixIcon}`" />
      </svg>
    </slot>

    <!-- 有后缀 -->
    <slot v-if="$slots.suffix" slot="suffix" name="suffix" />
    <!-- 没后缀 -->
    <slot v-if="!$slots.suffix" slot="suffix" name="suffix">
      <span class="suffix">
        <span v-if="unit" class="unit">{{ unit }}</span>
        <!-- 有icon -->
        <svg v-if="suffixIcon" :class="['icon']" aria-hidden="true">
          <use :xlink:href="`#${suffixIcon}`" />
        </svg>
      </span>
    </slot>
  </el-input>
  <!-- :prefixIcon="prefixIcon"  -->
  <!-- :suffixIcon="suffixIcon" -->
</template>

<script>
import $ from 'jquery'
export default {
  name: 'HousekeeperInput',
  props: {
    value: [String, Number],
    maxlength: Number,
    minlength: Number,
    type: {
      type: String,
      default: 'text'
    },
    showWordLimit: {
      // 只在 type = "text" 或 type = "textarea" 时有效
      type: Boolean,
      default: false
    },
    placeholder: String,
    clearable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    prefixIcon: String,
    suffixIcon: String,
    autofocus: {
      type: Boolean,
      default: false
    },
    unit: String
  },
  computed: {
    showPassword() {
      return this.type === 'password'
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (!newVal) return
        // this.$emit("input", newVal.replace(/[^\d]/g, ""));
      },
      immediate: true
    }
  },
  mounted() {
    // const id = this.createId();
    // this.$refs.elInput.$el.setAttribute("id", id);
    // const el = $(`#${id} .suffix`)[0];
    // if (!el) return;
    // let suffixWidth = this.getStyle(el, "width");
    // if (this.clearable) {
    //   suffixWidth += 30;
    // }
    // $(`#${id}`)
    //   .children("input")
    //   .css("padding-right", parseInt(suffixWidth) + 10 + "px");
  },
  methods: {
    onBlur(e) {
      const $prepend = $(e.target).prev()
      $prepend.removeClass('prepend_focus')
      const $next = $(e.target).nextAll('.el-input-group__append')
      $next.removeClass('append_focus')
    },
    onFocus(e) {
      const $prepend = $(e.target).prev()
      $prepend.addClass('prepend_focus')
      const $next = $(e.target).nextAll('.el-input-group__append')
      $next.addClass('append_focus')
      this.$emit('focus')
    },
    clear(e) {
      this.$emit('clear')
    }
  }
}
</script>

<style lang="scss" scoped>
.unit {
  margin: 0 5px;
}
/deep/.el-textarea__inner {
  resize: none;
}
</style>
